<template>
  <!--子导航组件-->
  <div class="myloveNav">
    <ul>
      <li
        v-for="(val,index) in pathUrl1"
        :key="index"
        @click="skip(val.name)"
        :class="pathName==val.name?'activeColor':''"
      >{{val.text}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mynav",
  data() {
    return {
      pathName: ""
    };
  },
  props:['pathUrl1','routeIndex'],
  watch: {
    $route: "newpage"
  },
  methods: {
    skip(path) {
      //console.log(this.$route)
      if (this.$route.matched[this.routeIndex].name !== path) {
        this.$router.push({ name: path });
        this.pathName = this.$route.matched[this.routeIndex].name;
      }
    },
    newpage() {
      if(this.$route.matched[this.routeIndex].name){
        this.pathName = this.$route.matched[this.routeIndex].name;
      }
    }
  },
  mounted(){
      if(this.$route.matched[this.routeIndex].name){
        this.pathName = this.$route.matched[this.routeIndex].name;
      }
  }
};
</script>

<style scoped lang='less'>
.myloveNav{
  //width: 700px;
  ul {
    display: flex;
    li {
      margin: 0 15px;
      text-align: center;
      cursor: pointer;
    }
    li:hover {
      color: #31c27c;
    }
  }
}
.activeColor {
  color: #31c27c;
}
</style>